﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../src/js/rayui.js"></script>
    <script>

        var index=1, data = [];
        var now = new Date(2017, 10, 1);
        var mm = now.getMinutes();

        function getNowFormatDate(date) {
            var seperator1 = "-";
            var seperator2 = ":";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = year +
                seperator1 +
                month +
                seperator1 +
                strDate +
                " " +
                date.getHours() +
                seperator2 +
                date.getMinutes() +
                seperator2 +
                date.getSeconds();
            return currentdate;
        }

        var icons = ["layer-icon-0", "layer-icon-1", "layer-icon-2", "layer-icon-3", "layer-icon-4", "layer-icon-5", "layer-icon-20", "layer-icon-21", "layer-icon-22", "layer-icon-23", "layer-icon-24", "layer-icon-25"],
            iconsCount = icons.length;

        function getNodes(count, prefix) {
            var tmpdata = [];
            for (var i = 0; i < count; i++) {
                now.setMinutes(mm + i);
                var model = {
                    id: index++,
                    name: "我是菜单" + (prefix || '') + i,
                    link: "我是链接" + (prefix || '') + i,
                    icon: "" + icons[i % iconsCount],
                    createTime: getNowFormatDate(now)
                }
                tmpdata.push(model);
            }
            return tmpdata;
        }

        data = getNodes(3);

        for (var i = 0; i < data.length; i++) {
            data[i].children = getNodes(3, data[i].id + "-");
        }

        //var str = JSON.stringify(data);
        //debugger 
    </script>
    <style>
        body {
            width: 80%;
            padding: 20px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

    <a class="btn-link" href="#anchor">使用说明</a>

    <br />
    <br />

    <h4>8、多行表头</h4>
    <table id="treegrid8"></table>
    
<h4>7、宽度百分比</h4>
<table id="treegrid7"></table>
    <h4>6、不使用预置图标，自己操作</h4>
    <table id="treegrid6"></table>

    <h4>5、ajax请求数据</h4>
    <table id="treegrid5"></table>

    <h4>4、菜单树可以点击</h4>
    <table id="treegrid4"></table>

    <h4>3、六级tree，不同级别不同颜色(多于6级的菜单需要自己定义颜色值，详见bgColors属性)</h4>
    <table id="treegrid3"></table>

    <h4>2、三级tree，添加skin: "col"，展开第一个节点</h4>
    <table id="treegrid2"></table>

    <h4>1、两级tree，默认折叠</h4>
    <table id="treegrid1"></table>

    <script>

        rayui.use(['treegrid', 'layer'], function () {

            var treegrid = rayui.treegrid,
                layer = rayui.layer;

            function initTable8() {
                var treeIns = treegrid.render({
                    elem: "#treegrid8",
                    spread: true,
                    data: data,
                    height: 400,
                    icon: false,
                    cols: [
                        [
                            { title: '标题1', align: 'center', colspan: 2, style: { color: "#f00" }  },
                            { title: '标题2', align: 'center', colspan: 2, style: { color: "#24a704" }  }
                        ],
                        [
                            {
                                field: 'name', title: '菜单名称', width: '40%', align: 'left', islink: true, resize: true, formatter: function (v, data) {
                                    return '<i class="ra layer-icon ' + data.icon + '" style="font-size:18px;"></i>&nbsp;<span>' + v + '</span>';
                                }
                            },
                            { field: 'link', title: '链接地址', width: '*', align: 'center', resize: true },
                            {
                                field: 'icon', title: '图标', width: '10%', align: 'center', resize: true, formatter: function (v, data) {
                                    return '<i class="ra layer-icon ' + data.icon + '"></i>';
                                }
                            },
                            { field: 'createTime', title: '创建时间', width: "20%", align: 'left', resize: true }
                        ]
                    ]
                });
            }

            function initTable7() {
                var treeIns = treegrid.render({
                    elem: "#treegrid7",
                    spread: true,
                    data: data,
                    height: 400,
                    icon: false,
                    cols: [
                        [
                            {
                                field: 'name', title: '菜单名称', width: '40%', align: 'left', islink: true, resize: true, formatter: function (v, data) {
                                    return '<i class="ra layer-icon ' + data.icon + '" style="font-size:18px;"></i>&nbsp;<span>' + v + '</span>';
                                }
                            },
                            { field: 'link', title: '链接地址', width: '*', align: 'center', resize: true },
                            {
                                field: 'icon', title: '图标', width: '10%', align: 'center', resize: true, formatter: function (v, data) {
                                    return '<i class="ra layer-icon ' + data.icon + '"></i>';
                                }
                            },
                            { field: 'createTime', title: '创建时间', width: "20%", align: 'left' }
                        ]
                    ]
                });
            }

            function initTable6() {
                var treeIns = treegrid.render({
                    elem: "#treegrid6",
                    spread: true,
                    data: data,
                    height: 400,
                    icon: false,
                    cols: [
                        [
                            {
                                field: 'name', width: 200, title: '菜单名称', align: 'left', islink: true, resize: true, formatter: function (v, data) {
                                    return '<i class="ra layer-icon ' + data.icon + '" style="font-size:18px;"></i>&nbsp;<span>' + v + '</span>';
                                }
                            },
                            { field: 'link', title: '链接地址', align: 'center', resize: true },
                            {
                                field: 'icon', title: '图标', width: 50, align: 'center', resize: true, formatter: function (v, data) {
                                    return '<i class="ra layer-icon ' + data.icon + '"></i>';
                                }
                            },
                            { field: 'createTime', title: '创建时间', width: 150, align: 'left' },
                            {
                                field: 'opts', title: '操作', width: 150, align: 'center', resize: true, formatter: function () {
                                    return '<a class="rayui-btn btn-danger btn-3x-sh" event="del">删除</a>&nbsp;<a class="rayui-btn btn-success btn-3x-sh" event="edit">编辑</a>';
                                }
                            }
                        ]
                    ]
                });
                treeIns.on("click", function (evt, obj) {
                    if (evt === "del") {
                        layer.confirm("确定删除[" + obj.data.name + "]吗？", function (index) {
                            obj.del();
                            layer.close(index);
                        });
                    } else if (evt === "edit") {
                        layer.prompt("请输入菜单名称", { value: obj.data.name }, function (index, newvalue) {
                            obj.data.name = newvalue;
                            obj.update();
                            layer.close(index);
                        });
                    }
                });
            }

            function initTable5() {
                var treeIns = treegrid.render({
                    elem: "#treegrid5",
                    url: "/Data.ashx?action=GetTreeGrid",
                    spread: true,
                    height: 400,
                    cols: [
                        [
                            {
                                field: 'name', width: 310, title: '菜单名称', align: 'left', islink: true, resize: true, formatter: function (v) {
                                    return "<a target='_blank' href='http://www.baidu.com'>" + v + "，我是链接可以点击</a>";
                                }
                            },
                            { field: 'link', title: '链接地址', align: 'center', resize: true },
                            {
                                field: 'icon', title: '图标', width: 100, align: 'center', resize: true, formatter: function (v, data) {
                                    return '<i class="ra layer-icon ' + data.icon + '"></i>';
                                }
                            },
                            { field: 'createTime', title: '创建时间', width: 150, align: 'left' }
                        ]
                    ]
                });
            }

            function initTable4() {
                var tmpData = $.extend(true, [], data);
                var first = tmpData[0].children[0];
                first.children = getNodes(3, "0-0-");

                var treeIns = treegrid.render({
                    elem: "#treegrid4",
                    data: tmpData,
                    spread: true,
                    height: 400,
                    cols: [
                        [
                            {
                                field: 'name', width: 310, title: '菜单名称', align: 'left', islink: true, resize: true, formatter: function (v) {
                                    return "<a target='_blank' href='http://www.baidu.com'>" + v + "，我是链接可以点击</a>";
                                }
                            },
                            { field: 'link', title: '链接地址', align: 'center', resize: true },
                            { field: 'icon', title: '图标', width: 110, align: 'left', resize: true },
                            { field: 'createTime', title: '创建时间', width: 150, align: 'left' },
                            {
                                field: 'opts', title: '操作', width: 150, align: 'center', resize: true, formatter: function () {
                                    return '<a class="rayui-btn btn-danger btn-3x-sh" event="del">删除</a>&nbsp;<a class="rayui-btn btn-success btn-3x-sh" event="edit">编辑</a>';
                                }
                            }
                        ]
                    ]
                });
                treeIns.on("click", function (evt, obj) {
                    if (evt === "del") {
                        layer.confirm("确定删除[" + obj.data.name + "]吗？", function (index) {
                            obj.del();
                            layer.close(index);
                        });
                    } else if (evt === "edit") {
                        layer.prompt("请输入菜单名称", { value: obj.data.name }, function (index, newvalue) {
                            obj.data.name = newvalue;
                            obj.update();
                            layer.close(index);
                        });
                    }
                });
            }

            function initTable3() {
                var tmpData = $.extend(true, [], data);
                var first = tmpData[0].children[0];
                first.children = getNodes(2, "0-0-");
                first = first.children[0];
                first.children = getNodes(2, "0-0-0-");
                first = first.children[0];
                first.children = getNodes(2, "0-0-0-0-");
                first = first.children[0];
                first.children = getNodes(2, "0-0-0-0-0-");

                var treeIns = treegrid.render({
                    elem: "#treegrid3",
                    data: tmpData,
                    spread: true,
                    height: 400,
                    bgColors: true,
                    cols: [
                        [
                            { field: 'name', width: 280, title: '菜单名称', align: 'left', resize: true },
                            { field: 'link', title: '链接地址', align: 'left', resize: true },
                            { field: 'icon', title: '图标', width: 110, align: 'left', resize: true },
                            { field: 'createTime', title: '创建时间', width: 150, align: 'left' }
                        ]
                    ]
                });
            }

            function initTable2() {
                var tmpData = $.extend(true, [], data);
                tmpData[0].spread = true;
                var first = tmpData[0].children[0];
                first.children = getNodes(3, "0-0-");
                var treeIns = treegrid.render({
                    elem: "#treegrid2",
                    data: tmpData,
                    skin: "col",
                    cols: [
                        [
                            { field: 'name', width: 200, title: '菜单名称', align: 'left', resize: true },
                            { field: 'link', title: '链接地址', align: 'center', resize: true },
                            { field: 'icon', title: '图标', width: 110, align: 'left', resize: true },
                            { field: 'createTime', title: '创建时间', width: 150, align: 'left' }
                        ]
                    ]
                });
                treeIns.on("click", function (evt, obj) {
                    if (evt === "del") {
                        layer.confirm("确定删除[" + obj.data.name + "]吗？", function (index) {
                            obj.del();
                            layer.close(index);
                        });
                    } else if (evt === "edit") {
                        layer.prompt("请输入菜单名称", { value: obj.data.name }, function (index, newvalue) {
                            obj.data.name = newvalue;
                            obj.update();
                            layer.close(index);
                        });
                    }
                });
            }

            function initTable1() {
                var treeIns = treegrid.render({
                    elem: "#treegrid1",
                    data: data,
                    cols: [
                        [
                            { field: 'name', minWidth: 200, title: '菜单名称', align: 'left', resize: true },
                            { field: 'link', title: '链接地址', align: 'center', resize: true },
                            { field: 'icon', title: '图标', align: 'left', resize: true },
                            { field: 'createTime', title: '创建时间', width: 170, align: 'left' }
                        ]
                    ]
                });
            }

            initTable1();
            initTable2();
            initTable3();
            initTable4();
            initTable5();
            initTable6();
            initTable7();
            initTable8();

        });
    </script>
    
<div class="card">
    <p>在on事件中操作data数据<span style="color:#f00">不会</span>修改table的原有数据</p>
</div>


<h4 id="anchor">使用说明</h4>
    <pre style="color: #159200; word-wrap: break-word; white-space: pre-wrap;">
使用说明：


treegrid属性option：
elem: 对象
url：ajax请求路径
method：ajax请求方法，可选get|post，默认get
where: ajax查询条件，object对象
width：容器宽度，数值
height：容器高度，数值|full-数值|sel-jqselectors-数值(jqselectors选择器不支持-符号，因为需要按照-分割)。
             使用sel模式时，只需填写table下方的容器选择器，系统会自动剔除上方的dom高度，如果固定数值没有，请填写0，不能省略
minHeight： 表格最小高度，默认80
nowrap: 是否自动换行，默认true不换行
spread: 默认false，折叠
fieldName: 树形菜单列，默认'name'
fieldChildren: 数据子节点名称，默认'children'
icon：是否使用图标，可选true|false，默认true
bgColors：层级背景色，可选true|false|[#ffffff,……]，默认值false，true：使用预置的6种颜色，false：不使用背景色，数组：自定义颜色
skin：皮肤，可选col|row|none，col：列边框风格，row：行边框风格，none：无边框风格
initOnly: 只进行初始化，不请求数据，默认false
loading： 请求数据时，是否显示loading，默认true
cellMinWidth: 所有单元格默认最小宽度，默认60px
animSpeed: 动画执行时间，单位毫秒，默认300



属性事件：
onAjaxBeforeSend(xhr)：和ajax beforeSend参数一致，此时this为本次ajax请求时传递的options参数。
                                        如果返回false可以取消本次ajax请求
onAjaxSuccess(result)：ajax成功请求数据时（table清除上次数据后），在这里可以做数据统一。
                                    需要返回json数据，格式为{code: 0, msg: '错误信息', count: 100, data: []},code为0时表示成功。
                                    此时this为本次ajax请求时传递的options参数
onAjaxError(xhr, textStatus, errorThrown)：和ajax error参数一致，此时this为本次ajax请求时传递的options参数

onBeforeRenderStyle()：渲染数据前，如果table内使用了其他组件，可以再这里调用一下数据渲染。在onComplete调用会导致样式差异
onBeforeAddRow(rowindex, data)： 添加行数据前返回行索引和行数据
onAddRow(rowindex, tr, data)： 添加行数据后返回行索引、行和行数据
onComplete(data)：所有处理完毕（table渲染数据结束），data为onAjaxSuccess返回的result数据



cols：属性
field：绑定字段，需要显示的列必填，主标题副标题可不填
title：标题
sort：排序，可选true|false，默认false
width：宽度，可以是定宽，百分比；不填则自适应宽度
rowspan：行合并
colspan：列合并
resize：拖拽宽度，默认false
align：对齐方式
style：设置head样式，支持css所有样式，带小横线的需要用引号包起来，eg：style: { "font-size": "14px" }
dataStyle: 设定数据样式，只有包含field时才有效，带小横线的需要用引号包起来，eg：style: { "font-size": "14px" }
dataType: 数据格式，可选html|非html值。当为html时，会进行转码，其他值不做处理，有formatter时无效，自行处理
formatter(v, data, index)：数据格式化，传入一个函数比如操作列，v当前值，data当前行数据，index行号从0开始，可能是内部table的行号


treeIns方法：
reload：重新加载
getData：获取treegrid所有数据
getDataByIndexs：获取行数组，数据格式每个包含一个index，data，index为选中行序号
on(event, callback)：事件绑定。event字符串，可选如下，callback为函数
    click返回函数function(evt, obj)，evt为事件，obj包含index，data，tr，del，update，index为tr行号，
                                                     tr为dom对象，data为数据（只监听包含event的事件）
    swich返回函数function(evt, obj)，evt为事件，obj包含index，data，tr，del，update，index为tr行号，
                                                     tr为dom对象，data为数据（只监听包含event的事件）
    onExpanded返回函数function(data, $trnext, isSpread)，data为当前行数据，$trnext为下一行jq对象，isSpread为展开（true）/折叠（false）

可全局配置参数：
treegrid.options：属性包含如下
        fieldName: 'name',//树形菜单列
        fieldChildren: 'children',//数据子节点名称
        spread: false, //默认折叠
        icon: true,//是否显示图标
        minHeight: 80,//表格最小高度
        bgColors: false,//是否含有背景色
        loading: true, //请求数据时，是否显示loading
        cellMinWidth: 60, //所有单元格默认最小宽度
        animSpeed: 300//动画执行时间


数据格式：children可以向下嵌套
[{
	"id": 0,
	"name": "我是菜单0",
	"link": "我是链接0",
	"icon": "fa",
	"createTime": "2017-11-01 0:0:0",
	"children": [{
		"id": 0,
		"name": "我是菜单0-0",
		"link": "我是链接0-0",
		"icon": "fa",
		"createTime": "2017-11-01 0:0:0",
		"children": [{
			"id": 0,
			"name": "我是菜单0-0-0",
			"link": "我是链接0-0-0",
			"icon": "fa",
			"createTime": "2017-11-01 0:0:0"
		}, {
			"id": 1,
			"name": "我是菜单0-0-1",
			"link": "我是链接0-0-1",
			"icon": "fa",
			"createTime": "2017-11-01 0:1:0"
		}, {
			"id": 2,
			"name": "我是菜单0-0-2",
			"link": "我是链接0-0-2",
			"icon": "fa",
			"createTime": "2017-11-01 0:2:0"
		}]
	}, {
		"id": 1,
		"name": "我是菜单0-1",
		"link": "我是链接0-1",
		"icon": "fa",
		"createTime": "2017-11-01 0:1:0"
	}]
}, {
	"id": 1,
	"name": "我是菜单1",
	"link": "我是链接1",
	"icon": "fa",
	"createTime": "2017-11-01 0:1:0",
	"children": [{
		"id": 0,
		"name": "我是菜单1-0",
		"link": "我是链接1-0",
		"icon": "fa",
		"createTime": "2017-11-01 0:0:0"
	}]
}]
</pre>

</body>
</html>